<template>
	<view class="map">
		<view class="category_name">
			周边配套
			<view class="fr more" @click="openXiaoquMap">查看更多<uni-icons type="arrowright" size="12" /></view>
			<view class="cl"></view>
		</view>
		<view class="map_tool" @click="openXiaoquMap">
			<map id="map1" ref="map1" style="width: 100%;height: 100%;" :longitude="mapData.longitude" :latitude="mapData.latitude" :scale="mapData.scale" :layer-style="mapData.layerStyle" :markers="mapData.markers"></map>
		</view>
		<view class="facility">
			<view class="uni-flex tab">
				<view v-for="(item, index) in navMapTabList" :key="index" class="uni-flex-item tab_name" :class="item.tabName == navMapTabName ? 'current' : ''" @click="changeMapTab(item)">
					<text>{{ item.tabName }}</text>
					<text class="border_bottom"></text>
				</view>
			</view>
			<view class="tab_lists">
				<view v-for="(item, index) in navMapTabList" :key="index" class="item" :class="item.tabName == navMapTabName ? '' : 'none'">
					<view v-for="(item2, index2) in item.stationList" v-if="index2 < 6" class="row">
						<text class="title">{{ item2.title }}</text>
						<text class="fr">距离 {{ item2.distance }}米</text>
					</view>
				</view>
				
				<view class="cl"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'houseDetailMap',
		props: {
			title: {
				type: String,
				default: ''
			},
			lng: {
				type: String,
				default: ''
			},
			lat: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				teLocation: {
					lng: '',
					lat: ''
				},
				navMapTabName: '交通',
				navMapTabList: [
					{
						tabName: '交通',
						item: ['地铁站', '公交站'],
						stationList: []
					},
					{
						tabName: '教育',
						item: ['幼儿园有', '小学', '中学', '大学'],
						stationList: []
					},
					{
						tabName: '医疗',
						item: ['医院', '药店'],
						stationList: []
					},
					{
						tabName: '购物',
						item: ['商场', '超市', '市场'],
						stationList: []
					},
					{
						tabName: '生活',
						item: ['银行', 'ATM', '餐馆'],
						stationList: []
					},
					{
						tabName: '休闲',
						item: ['公园', '电影院', '健身房', '体育馆'],
						stationList: []
					},
				],
				mapData: {
					longitude: 0,
					latitude: 0,
					scale: 14,
					layerStyle: 1,
					markers: []
				}
			}
		},
		watch: {
			lng: function(value){
				this.teLocation = this.Temap.bMapToTeMap(this.lat, this.lng)
				// this.teLocation.lng = this.lng
				// this.teLocation.lat = this.lat
				this.setMap()
				this.initMapTab()
			}
		},
		methods: {
			openXiaoquMap(){
				uni.navigateTo({
				    url: '/pagesA/xiaoqu/map?title=' + this.title + '&lng=' + this.teLocation.lng + '&lat=' + this.teLocation.lat
				});
			},
			// 地图配套tab切换
			changeMapTab: function(mapTabItem) {
				this.navMapTabName = mapTabItem.tabName
			},
			// 初始化地图周边配套
			initMapTab: function() {
				for(let i = 0, len = this.navMapTabList.length; i < len; i++) {
					let mapTabItem = this.navMapTabList[i]
					for(let i = 0, len = mapTabItem.item.length; i < len; i++) {
						this.Amap.getPoiAround(this.teLocation.lng, this.teLocation.lat, mapTabItem.item[i], data => {
							mapTabItem.stationList = [...mapTabItem.stationList, ...data]
						})
					}
				}
			},
			// 地图
			setMap: function() {
				
				this.mapData.longitude = this.teLocation.lng
				this.mapData.latitude = this.teLocation.lat
				
				this.mapData.markers = [{
					id: 1,
					longitude: this.teLocation.lng,
					latitude: this.teLocation.lat,
					// iconPath: '',
					callout: {
						display: 'ALWAYS',
						content: this.title
					}
				}]
				uni.createMapContext('map1', this)
			}
		}
	}
</script>

<style>
	/* 周边配套 */
	.map{}
	.map .category_name{height:50rpx;line-height: 50rpx;padding:20rpx 40rpx;font-size:36rpx;font-weight: bold;}
	.map .category_name .more{font-size:24rpx;font-weight:500;color:#999;}
	.map .map_tool{height:360rpx;background-color: #2C405A;}
	.map .facility{}
	.map .facility .tab{height: 50rpx;padding:20rpx 0;font-size:28rpx;font-weight: bold;}
	.map .facility .tab .tab_name{text-align: center;line-height: 44rpx;}
	.map .facility .tab .current{color:#ED0030}
	.map .facility .tab .current .border_bottom{display: block;margin:0 auto;width: 30rpx;height: 6rpx;border-radius: 40%;background-color: #ED0030;}
	.map .tab_lists{padding:0 40rpx 20rpx 40rpx;}
	.map .tab_lists .item{}
	.map .tab_lists .item .row{height:42rpx;line-height: 42rpx;font-size: 24rpx;}
</style>
